<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>智能家居APP界面设计 - 案例详情</title>
  <!-- 引入Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <!-- Tailwind配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#36CBCB',
            dark: '#1D2939',
            light: '#F9FAFB',
            muted: '#667085'
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .text-balance {
        text-wrap: balance;
      }
      .animate-fade-in {
        animation: fadeIn 0.6s ease-in-out;
      }
      .animate-slide-up {
        animation: slideUp 0.6s ease-out;
      }
      .animate-scale {
        transition: transform 0.3s ease;
      }
      .animate-scale:hover {
        transform: scale(1.02);
      }
      .image-zoom-container {
        overflow: hidden;
        border-radius: 0.75rem;
      }
      .image-zoom {
        transition: transform 0.5s ease;
      }
      .image-zoom-container:hover .image-zoom {
        transform: scale(1.05);
      }
    }
    
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    
    @keyframes slideUp {
      from { transform: translateY(30px); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }
  </style>
</head>
<body class="font-inter bg-gray-50 text-dark">
  <!-- 导航栏 -->
  <header class="fixed w-full bg-white/95 backdrop-blur-sm shadow-sm z-50 transition-all duration-300" id="navbar">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex justify-between items-center h-16">
        <div class="flex items-center">
          <a href="#" class="text-primary font-bold text-xl flex items-center">
            <i class="fa fa-cube mr-2"></i>
            <span>创意案例库</span>
          </a>
        </div>
        
        <!-- 桌面导航 -->
        <nav class="hidden md:flex space-x-8">
          <a href="#" class="text-muted hover:text-primary transition-colors">首页</a>
          <a href="#" class="text-muted hover:text-primary transition-colors">案例分类</a>
          <a href="#" class="text-muted hover:text-primary transition-colors">关于我们</a>
          <a href="#" class="text-muted hover:text-primary transition-colors">联系咨询</a>
        </nav>
        
        <!-- 联系按钮 -->
        <div class="hidden md:block">
          <a href="#contact" class="inline-flex items-center px-4 py-2 bg-primary text-white rounded-lg font-medium hover:bg-primary/90 transition-colors">
            <i class="fa fa-envelope-o mr-2"></i> 咨询案例
          </a>
        </div>
        
        <!-- 移动端菜单按钮 -->
        <div class="md:hidden">
          <button type="button" class="text-gray-500 hover:text-primary" id="menu-toggle">
            <i class="fa fa-bars text-xl"></i>
          </button>
        </div>
      </div>
    </div>
    
    <!-- 移动端导航菜单 -->
    <div class="md:hidden hidden bg-white border-t animate-fade-in" id="mobile-menu">
      <div class="container mx-auto px-4 py-3 space-y-2">
        <a href="#" class="block py-2 text-muted hover:text-primary transition-colors">首页</a>
        <a href="#" class="block py-2 text-muted hover:text-primary transition-colors">案例分类</a>
        <a href="#" class="block py-2 text-muted hover:text-primary transition-colors">关于我们</a>
        <a href="#" class="block py-2 text-muted hover:text-primary transition-colors">联系咨询</a>
        <a href="#contact" class="block py-2 mt-2 text-center bg-primary text-white rounded-lg font-medium">
          <i class="fa fa-envelope-o mr-2"></i> 咨询案例
        </a>
      </div>
    </div>
  </header>

  <!-- 主内容区 -->
  <main class="container mx-auto px-4 sm:px-6 lg:px-8 pt-24 pb-16">
    <!-- 返回按钮 -->
    <div class="mb-8 animate-fade-in">
      <a href="#" class="inline-flex items-center text-muted hover:text-primary transition-colors">
        <i class="fa fa-arrow-left mr-2"></i>
        <span>返回案例列表</span>
      </a>
    </div>
    
    <!-- 案例标题和分类 -->
    <div class="mb-10 animate-slide-up" style="animation-delay: 0.1s">
      <div class="flex flex-wrap items-start gap-3 mb-4">
        <span class="px-4 py-1.5 bg-primary/10 text-primary text-sm font-medium rounded-full">用户体验</span>
        <span class="px-4 py-1.5 bg-blue-100 text-blue-600 text-sm font-medium rounded-full">移动应用</span>
        <span class="px-4 py-1.5 bg-purple-100 text-purple-600 text-sm font-medium rounded-full">界面设计</span>
      </div>
      <h1 class="text-[clamp(1.8rem,4vw,3rem)] font-bold text-dark mb-4">智能家居APP界面设计</h1>
      <div class="flex flex-wrap items-center gap-x-8 gap-y-2 text-muted">
        <div class="flex items-center">
          <i class="fa fa-calendar-o mr-2"></i>
          <span>2023年6月完成</span>
        </div>
        <div class="flex items-center">
          <i class="fa fa-clock-o mr-2"></i>
          <span>项目周期：3个月</span>
        </div>
        <div class="flex items-center">
          <i class="fa fa-user-o mr-2"></i>
          <span>客户：绿居智能科技</span>
        </div>
      </div>
    </div>
    
    <!-- 案例主图 -->
    <div class="mb-16 rounded-xl overflow-hidden shadow-lg animate-slide-up image-zoom-container" style="animation-delay: 0.2s">
      <img src="https://picsum.photos/id/26/1600/800" alt="智能家居APP界面设计主视觉" class="w-full h-[400px] md:h-[500px] object-cover image-zoom">
    </div>
    
    <!-- 案例概览 -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-16">
      <div class="lg:col-span-2 animate-slide-up" style="animation-delay: 0.3s">
        <h2 class="text-2xl font-bold mb-6 pb-2 border-b border-gray-200">项目概述</h2>
        <p class="text-muted text-lg leading-relaxed mb-6">
          为领先智能家居品牌"绿居智能"打造的全平台控制中心，通过直观的界面设计和流畅的交互体验，让用户轻松管理家中所有智能设备。该应用支持灯光、温度、安防、娱乐等多类设备的集成控制，同时提供场景模式、定时任务和数据分析功能。
        </p>
        <p class="text-muted text-lg leading-relaxed">
          设计团队深入研究了不同年龄段用户的使用习惯，采用了直观易懂的视觉语言和操作逻辑，确保各类用户都能轻松上手。应用上线后迅速成为同类产品中的标杆，获得了用户和行业专家的一致好评。
        </p>
      </div>
      
      <div class="bg-white p-6 rounded-xl shadow-md animate-slide-up" style="animation-delay: 0.4s">
        <h3 class="font-semibold text-lg mb-4">项目亮点</h3>
        <ul class="space-y-4">
          <li class="flex">
            <div class="flex-shrink-0 w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-3">
              <i class="fa fa-lightbulb-o"></i>
            </div>
            <div>
              <h4 class="font-medium">创新交互设计</h4>
              <p class="text-muted text-sm">简化操作流程，减少30%的操作步骤</p>
            </div>
          </li>
          <li class="flex">
            <div class="flex-shrink-0 w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-3">
              <i class="fa fa-paint-brush"></i>
            </div>
            <div>
              <h4 class="font-medium">精致视觉设计</h4>
              <p class="text-muted text-sm">符合现代审美，提升品牌质感</p>
            </div>
          </li>
          <li class="flex">
            <div class="flex-shrink-0 w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-3">
              <i class="fa fa-mobile"></i>
            </div>
            <div>
              <h4 class="font-medium">全平台适配</h4>
              <p class="text-muted text-sm">支持手机、平板和智能手表</p>
            </div>
          </li>
          <li class="flex">
            <div class="flex-shrink-0 w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-3">
              <i class="fa fa-line-chart"></i>
            </div>
            <div>
              <h4 class="font-medium">数据驱动优化</h4>
              <p class="text-muted text-sm">基于用户行为持续改进体验</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
    
    <!-- 项目背景与挑战 -->
    <div class="mb-16 animate-slide-up" style="animation-delay: 0.5s">
      <h2 class="text-2xl font-bold mb-6 pb-2 border-b border-gray-200">项目背景与挑战</h2>
      
      <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mt-6">
        <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow">
          <h3 class="text-xl font-semibold mb-4 flex items-center">
            <span class="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-2 text-sm">1</span>
            项目背景
          </h3>
          <p class="text-muted mb-4">
            绿居智能科技是一家专注于智能家居设备研发的企业，已推出智能灯具、温控系统、安防摄像头等多条产品线，但缺乏统一的控制平台，用户需要下载多个应用分别控制不同设备，体验不佳。
          </p>
          <p class="text-muted">
            客户希望打造一个整合所有设备的控制中心，实现"一个APP控制全屋智能"，提升用户体验并增强品牌凝聚力。
          </p>
        </div>
        
        <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow">
          <h3 class="text-xl font-semibold mb-4 flex items-center">
            <span class="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-2 text-sm">2</span>
            核心挑战
          </h3>
          <ul class="text-muted space-y-3">
            <li class="flex items-start">
              <i class="fa fa-circle text-xs text-primary mt-1.5 mr-2"></i>
              <span>如何在保持界面简洁的同时，支持多种设备的复杂控制功能</span>
            </li>
            <li class="flex items-start">
              <i class="fa fa-circle text-xs text-primary mt-1.5 mr-2"></i>
              <span>满足不同年龄段用户的使用习惯，特别是中老年用户的易用性需求</span>
            </li>
            <li class="flex items-start">
              <i class="fa fa-circle text-xs text-primary mt-1.5 mr-2"></i>
              <span>实现设备间的智能联动，提供场景化控制体验</span>
            </li>
            <li class="flex items-start">
              <i class="fa fa-circle text-xs text-primary mt-1.5 mr-2"></i>
              <span>确保不同品牌、不同协议的设备都能稳定连接和控制</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    
    <!-- 设计过程与解决方案 -->
    <div class="mb-16 animate-slide-up" style="animation-delay: 0.6s">
      <h2 class="text-2xl font-bold mb-6 pb-2 border-b border-gray-200">设计过程与解决方案</h2>
      
      <div class="space-y-10 mt-6">
        <!-- 阶段1 -->
        <div class="grid grid-cols-1 lg:grid-cols-5 gap-8 items-center">
          <div class="lg:col-span-2">
            <span class="inline-block px-3 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full mb-3">阶段一：用户研究</span>
            <h3 class="text-xl font-semibold mb-4">深入理解用户需求</h3>
            <p class="text-muted mb-4">
              我们对100名潜在用户进行了深度访谈和问卷调查，了解他们使用智能家居产品的习惯、痛点和期望。同时分析了市场上同类产品的优缺点，总结出关键需求点。
            </p>
            <p class="text-muted">
              研究发现，用户最看重操作的简洁性和稳定性，同时希望能实现设备间的联动控制，而不仅仅是单个设备的开关。
            </p>
          </div>
          <div class="lg:col-span-3 image-zoom-container shadow-md animate-scale">
            <img src="https://picsum.photos/id/3/1000/600" alt="用户研究过程" class="w-full h-auto rounded-xl image-zoom">
          </div>
        </div>
        
        <!-- 阶段2 -->
        <div class="grid grid-cols-1 lg:grid-cols-5 gap-8 items-center lg:flex-row-reverse">
          <div class="lg:col-span-2">
            <span class="inline-block px-3 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full mb-3">阶段二：信息架构</span>
            <h3 class="text-xl font-semibold mb-4">构建清晰的功能结构</h3>
            <p class="text-muted mb-4">
              基于用户研究结果，我们设计了三层信息架构：设备控制层、场景模式层和个性化设置层。通过卡片式布局和分类导航，让用户能快速找到所需功能。
            </p>
            <p class="text-muted">
              采用"常用优先"的设计原则，将用户最常使用的功能放在首页，减少操作路径。
            </p>
          </div>
          <div class="lg:col-span-3 image-zoom-container shadow-md animate-scale">
            <img src="https://picsum.photos/id/180/1000/600" alt="信息架构设计" class="w-full h-auto rounded-xl image-zoom">
          </div>
        </div>
        
        <!-- 阶段3 -->
        <div class="grid grid-cols-1 lg:grid-cols-5 gap-8 items-center">
          <div class="lg:col-span-2">
            <span class="inline-block px-3 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full mb-3">阶段三：界面设计</span>
            <h3 class="text-xl font-semibold mb-4">打造直观美观的界面</h3>
            <p class="text-muted mb-4">
              采用了简约现代的设计语言，主色调选用代表科技感的蓝色，辅以温暖的橙色作为交互反馈色。界面元素采用卡片式设计，配合适当的阴影和圆角，营造出层次感。
            </p>
            <p class="text-muted">
              为不同类型的设备设计了专属的控制组件，既保持整体风格统一，又能体现设备特性。
            </p>
          </div>
          <div class="lg:col-span-3 image-zoom-container shadow-md animate-scale">
            <img src="https://picsum.photos/id/0/1000/600" alt="界面设计展示" class="w-full h-auto rounded-xl image-zoom">
          </div>
        </div>
        
        <!-- 阶段4 -->
        <div class="grid grid-cols-1 lg:grid-cols-5 gap-8 items-center lg:flex-row-reverse">
          <div class="lg:col-span-2">
            <span class="inline-block px-3 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full mb-3">阶段四：测试优化</span>
            <h3 class="text-xl font-semibold mb-4">基于反馈持续改进</h3>
            <p class="text-muted mb-4">
              制作了高保真原型并进行多轮用户测试，邀请不同年龄段的用户参与试用并收集反馈。根据测试结果，优化了操作流程和界面细节，特别是针对中老年用户简化了部分复杂操作。
            </p>
            <p class="text-muted">
              最终版本相比初始设计，减少了40%的操作步骤，将用户完成常用任务的时间缩短了65%。
            </p>
          </div>
          <div class="lg:col-span-3 image-zoom-container shadow-md animate-scale">
            <img src="https://picsum.photos/id/160/1000/600" alt="用户测试与优化" class="w-full h-auto rounded-xl image-zoom">
          </div>
        </div>
      </div>
    </div>
    
    <!-- 设计成果展示 -->
    <div class="mb-16 animate-slide-up" style="animation-delay: 0.7s">
      <h2 class="text-2xl font-bold mb-6 pb-2 border-b border-gray-200">设计成果展示</h2>
      
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
        <div class="image-zoom-container shadow-md animate-scale">
          <img src="https://picsum.photos/id/20/800/600" alt="APP首页设计" class="w-full h-auto rounded-xl image-zoom">
        </div>
        <div class="image-zoom-container shadow-md animate-scale">
          <img src="https://picsum.photos/id/21/800/600" alt="设备控制界面" class="w-full h-auto rounded-xl image-zoom">
        </div>
        <div class="image-zoom-container shadow-md animate-scale">
          <img src="https://picsum.photos/id/22/800/600" alt="场景模式设置" class="w-full h-auto rounded-xl image-zoom">
        </div>
        <div class="image-zoom-container shadow-md animate-scale">
          <img src="https://picsum.photos/id/23/800/600" alt="数据分析页面" class="w-full h-auto rounded-xl image-zoom">
        </div>
      </div>
      
      <!-- 交互演示 -->
      <div class="mt-10 bg-white p-6 rounded-xl shadow-md">
        <h3 class="text-xl font-semibold mb-4">交互演示</h3>
        <div class="aspect-video bg-gray-100 rounded-lg flex items-center justify-center">
          <div class="text-center p-6">
            <i class="fa fa-play-circle-o text-5xl text-primary mb-4"></i>
            <p class="text-muted">点击播放交互演示视频</p>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 项目成果与影响 -->
    <div class="mb-16 animate-slide-up" style="animation-delay: 0.8s">
      <h2 class="text-2xl font-bold mb-6 pb-2 border-b border-gray-200">项目成果与影响</h2>
      
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mt-6">
        <div class="bg-white p-6 rounded-xl shadow-sm text-center hover:shadow-md transition-shadow">
          <div class="text-4xl font-bold text-primary mb-2">4.8</div>
          <div class="text-muted">应用商店评分</div>
        </div>
        <div class="bg-white p-6 rounded-xl shadow-sm text-center hover:shadow-md transition-shadow">
          <div class="text-4xl font-bold text-primary mb-2">100万+</div>
          <div class="text-muted">下载量</div>
        </div>
        <div class="bg-white p-6 rounded-xl shadow-sm text-center hover:shadow-md transition-shadow">
          <div class="text-4xl font-bold text-primary mb-2">42%</div>
          <div class="text-muted">用户活跃度提升</div>
        </div>
        <div class="bg-white p-6 rounded-xl shadow-sm text-center hover:shadow-md transition-shadow">
          <div class="text-4xl font-bold text-primary mb-2">28%</div>
          <div class="text-muted">产品销量增长</div>
        </div>
      </div>
      
      <div class="mt-8 bg-primary/5 p-6 rounded-xl border border-primary/20">
        <h3 class="text-xl font-semibold mb-4">客户评价</h3>
        <div class="flex items-start">
          <i class="fa fa-quote-left text-primary/30 text-4xl mr-4 mt-2"></i>
          <div>
            <p class="text-muted mb-4 leading-relaxed">
              "新的APP彻底改变了我们用户的体验，许多客户反馈说这是他们使用过的最直观的智能家居控制应用。设计团队不仅理解了我们的技术需求，更深入把握了用户的真实需求，创造出既美观又实用的产品。"
            </p>
            <div class="flex items-center">
              <img src="https://picsum.photos/id/1005/100/100" alt="客户头像" class="w-10 h-10 rounded-full object-cover mr-3">
              <div>
                <div class="font-medium">张明</div>
                <div class="text-sm text-muted">绿居智能科技 产品总监</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 相关案例 -->
    <div class="mb-16 animate-slide-up" style="animation-delay: 0.9s">
      <div class="flex justify-between items-center mb-6">
        <h2 class="text-2xl font-bold pb-2 border-b border-gray-200">相关案例</h2>
        <a href="#" class="text-primary font-medium hover:text-primary/80 transition-colors">查看更多 <i class="fa fa-arrow-right ml-1"></i></a>
      </div>
      
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-6">
        <!-- 相关案例1 -->
        <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
          <div class="image-zoom-container">
            <img src="https://picsum.photos/id/28/600/400" alt="环保品牌视觉识别系统" class="w-full h-48 object-cover image-zoom">
          </div>
          <div class="p-5">
            <span class="inline-block px-3 py-1 bg-secondary/10 text-secondary text-xs font-medium rounded-full mb-3">品牌设计</span>
            <h3 class="text-lg font-bold mb-2">环保品牌视觉识别系统</h3>
            <p class="text-muted text-sm mb-4 line-clamp-2">为新兴环保企业创建的全套品牌视觉识别系统，传达可持续发展理念。</p>
            <a href="#" class="text-primary text-sm font-medium hover:text-primary/80 transition-colors">查看详情 <i class="fa fa-arrow-right ml-1"></i></a>
          </div>
        </div>
        
        <!-- 相关案例2 -->
        <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
          <div class="image-zoom-container">
            <img src="https://picsum.photos/id/3/600/400" alt="健康管理平台开发" class="w-full h-48 object-cover image-zoom">
          </div>
          <div class="p-5">
            <span class="inline-block px-3 py-1 bg-green-100 text-green-600 text-xs font-medium rounded-full mb-3">产品开发</span>
            <h3 class="text-lg font-bold mb-2">健康管理平台开发</h3>
            <p class="text-muted text-sm mb-4 line-clamp-2">集健康数据追踪、个性化建议和在线咨询于一体的综合性平台。</p>
            <a href="#" class="text-primary text-sm font-medium hover:text-primary/80 transition-colors">查看详情 <i class="fa fa-arrow-right ml-1"></i></a>
          </div>
        </div>
        
        <!-- 相关案例3 -->
        <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
          <div class="image-zoom-container">
            <img src="https://picsum.photos/id/42/600/400" alt="新零售品牌数字营销" class="w-full h-48 object-cover image-zoom">
          </div>
          <div class="p-5">
            <span class="inline-block px-3 py-1 bg-purple-100 text-purple-600 text-xs font-medium rounded-full mb-3">数字营销</span>
            <h3 class="text-lg font-bold mb-2">新零售品牌数字营销</h3>
            <p class="text-muted text-sm mb-4 line-clamp-2">为快时尚品牌打造的全渠道数字营销策略，提升品牌知名度。</p>
            <a href="#" class="text-primary text-sm font-medium hover:text-primary/80 transition-colors">查看详情 <i class="fa fa-arrow-right ml-1"></i></a>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 咨询表单 -->
    <div id="contact" class="bg-white rounded-xl shadow-lg overflow-hidden animate-slide-up" style="animation-delay: 1s">
      <div class="grid grid-cols-1 lg:grid-cols-2">
        <div class="p-8 lg:p-10">
          <h2 class="text-2xl font-bold mb-4">咨询此案例</h2>
          <p class="text-muted mb-6">如果您对这个案例感兴趣，或者想了解更多细节，欢迎填写下面的表单联系我们</p>
          
          <form class="space-y-4">
            <div>
              <label for="name" class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
              <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-colors" placeholder="请输入您的姓名">
            </div>
            
            <div>
              <label for="email" class="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
              <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-colors" placeholder="请输入您的邮箱">
            </div>
            
            <div>
              <label for="company" class="block text-sm font-medium text-gray-700 mb-1">公司/机构</label>
              <input type="text" id="company" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-colors" placeholder="请输入您的公司或机构名称">
            </div>
            
            <div>
              <label for="message" class="block text-sm font-medium text-gray-700 mb-1">咨询内容</label>
              <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-colors resize-none" placeholder="请输入您想咨询的内容"></textarea>
            </div>
            
            <button type="submit" class="w-full py-3 bg-primary text-white rounded-lg font-medium hover:bg-primary/90 transition-colors flex items-center justify-center">
              <i class="fa fa-paper-plane mr-2"></i> 发送咨询
            </button>
          </form>
        </div>
        
        <div class="hidden lg:block bg-primary relative overflow-hidden">
          <div class="absolute inset-0 opacity-10">
            <img src="https://picsum.photos/id/1048/800/1000" alt="" class="w-full h-full object-cover">
          </div>
          <div class="relative h-full flex flex-col justify-center p-10 text-white">
            <h3 class="text-2xl font-bold mb-6">我们的服务</h3>
            
            <div class="space-y-6">
              <div class="flex items-start">
                <div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center mr-4 flex-shrink-0">
                  <i class="fa fa-paint-brush"></i>
                </div>
                <div>
                  <h4 class="text-lg font-semibold mb-1">UI/UX设计</h4>
                  <p class="text-white/80 text-sm">打造直观易用、美观大方的用户界面和流畅的交互体验</p>
                </div>
              </div>
              
              <div class="flex items-start">
                <div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center mr-4 flex-shrink-0">
                  <i class="fa fa-code"></i>
                </div>
                <div>
                  <h4 class="text-lg font-semibold mb-1">产品开发</h4>
                  <p class="text-white/80 text-sm">从概念到落地的全流程产品开发服务，满足您的业务需求</p>
                </div>
              </div>
              
              <div class="flex items-start">
                <div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center mr-4 flex-shrink-0">
                  <i class="fa fa-lightbulb-o"></i>
                </div>
                <div>
                  <h4 class="text-lg font-semibold mb-1">品牌策略</h4>
                  <p class="text-white/80 text-sm">塑造独特的品牌形象，传递品牌价值，提升市场竞争力</p>
                </div>
              </div>
              
              <div class="flex items-start">
                <div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center mr-4 flex-shrink-0">
                  <i class="fa fa-line-chart"></i>
                </div>
                <div>
                  <h4 class="text-lg font-semibold mb-1">市场推广</h4>
                  <p class="text-white/80 text-sm">制定精准有效的营销策略，提升品牌知名度和产品销量</p>
                </div>
              </div>
            </div>
            
            <div class="mt-10 pt-6 border-t border-white/20">
              <div class="flex items-center mb-3">
                <i class="fa fa-phone mr-3"></i>
                <span>400-123-4567</span>
              </div>
              <div class="flex items-center">
                <i class="fa fa-envelope-o mr-3"></i>
                <span>contact@cases.com</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
  
  <!-- 页脚 -->
  <footer class="bg-dark text-white py-12">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
        <div>
          <h3 class="text-xl font-bold mb-4 flex items-center">
            <i class="fa fa-cube mr-2"></i>
            创意案例库
          </h3>
          <p class="text-gray-400 mb-4">展示创新设计与开发的精品案例，为您提供灵感与参考。</p>
          <div class="flex space-x-4">
            <a href="#" class="text-gray-400 hover:text-white transition-colors"><i class="fa fa-weibo"></i></a>
            <a href="#" class="text-gray-400 hover:text-white transition-colors"><i class="fa fa-wechat"></i></a>
            <a href="#" class="text-gray-400 hover:text-white transition-colors"><i class="fa fa-instagram"></i></a>
            <a href="#" class="text-gray-400 hover:text-white transition-colors"><i class="fa fa-linkedin"></i></a>
          </div>
        </div>
        
        <div>
          <h4 class="text-lg font-semibold mb-4">快速链接</h4>
          <ul class="space-y-2">
            <li><a href="#" class="text-gray-400 hover:text-white transition-colors">首页</a></li>
            <li><a href="#" class="text-gray-400 hover:text-white transition-colors">案例分类</a></li>
            <li><a href="#" class="text-gray-400 hover:text-white transition-colors">关于我们</a></li>
            <li><a href="#" class="text-gray-400 hover:text-white transition-colors">联系咨询</a></li>
          </ul>
        </div>
        
        <div>
          <h4 class="text-lg font-semibold mb-4">案例分类</h4>
          <ul class="space-y-2">
            <li><a href="#" class="text-gray-400 hover:text-white transition-colors">品牌设计</a></li>
            <li><a href="#" class="text-gray-400 hover:text-white transition-colors">产品开发</a></li>
            <li><a href="#" class="text-gray-400 hover:text-white transition-colors">数字营销</a></li>
            <li><a href="#" class="text-gray-400 hover:text-white transition-colors">用户体验</a></li>
          </ul>
        </div>
        
        <div>
          <h4 class="text-lg font-semibold mb-4">联系我们</h4>
          <ul class="space-y-2">
            <li class="flex items-start">
              <i class="fa fa-map-marker mt-1 mr-3 text-gray-400"></i>
              <span class="text-gray-400">北京市朝阳区创意园区A座101室</span>
            </li>
            <li class="flex items-center">
              <i class="fa fa-phone mr-3 text-gray-400"></i>
              <span class="text-gray-400">400-123-4567</span>
            </li>
            <li class="flex items-center">
              <i class="fa fa-envelope-o mr-3 text-gray-400"></i>
              <span class="text-gray-400">contact@cases.com</span>
            </li>
          </ul>
        </div>
      </div>
      
      <div class="border-t border-gray-800 mt-10 pt-6 text-center text-gray-500">
        <p>© 2023 创意案例库 版权所有</p>
      </div>
    </div>
  </footer>

  <!-- JavaScript -->
  <script>
    // 页面加载完成后执行
    document.addEventListener('DOMContentLoaded', function() {
      // 移动端菜单切换
      const menuToggle = document.getElementById('menu-toggle');
      const mobileMenu = document.getElementById('mobile-menu');
      
      menuToggle.addEventListener('click', function() {
        mobileMenu.classList.toggle('hidden');
      });
      
      // 导航栏滚动效果
      const navbar = document.getElementById('navbar');
      window.addEventListener('scroll', function() {
        if (window.scrollY > 50) {
          navbar.classList.add('shadow-md');
          navbar.classList.remove('shadow-sm');
        } else {
          navbar.classList.remove('shadow-md');
          navbar.classList.add('shadow-sm');
        }
      });
      
      // 平滑滚动
      document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
          e.preventDefault();
          
          const targetId = this.getAttribute('href');
          if (targetId === '#') return;
          
          const targetElement = document.querySelector(targetId);
          if (targetElement) {
            window.scrollTo({
              top: targetElement.offsetTop - 80,
              behavior: 'smooth'
            });
            
            // 如果是移动菜单，点击后关闭
            if (!mobileMenu.classList.contains('hidden')) {
              mobileMenu.classList.add('hidden');
            }
          }
        });
      });
      
      // 图片懒加载效果
      const images = document.querySelectorAll('img');
      const imageObserver = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            const img = entry.target;
            img.classList.add('animate-fade-in');
            observer.unobserve(img);
          }
        });
      });
      
      images.forEach(img => {
        imageObserver.observe(img);
      });
    });
  </script>
</body>
</html>
